<template>
    <!-- 以下是顶部模块菜单的代码 -->
    <el-menu class="_layout-header" router mode="horizontal" :default-active="modulePath" background-color="#304156"
        text-color="#fff" active-text-color="#409EFF" style="border:none" ref="elHeader">
        <el-menu-item v-for="m in $store.state.user.routers.slice(0,maxShowHeaderMenu)" :index="m.path" :key="m.meta.id">
            {{ m.meta.title }}
        </el-menu-item>
        <el-submenu index="/more" v-if="$store.state.user.routers.length>maxShowHeaderMenu">
            <template slot="title">更多</template>
            <el-menu-item v-for="m in $store.state.user.routers.slice(maxShowHeaderMenu)" :index="m.path" :key="m.meta.id">
                {{ m.meta.title }}
            </el-menu-item>
        </el-submenu>
        <el-submenu index="/my" style="float:right;">
            <template slot="title">{{$store.state.user.name}}</template>
            <el-menu-item index @click="logout">注销</el-menu-item>
        </el-submenu>
        <!-- 左侧菜单 -->
        <el-scrollbar class="_scroll">
            <el-menu
                class="_layout-nav"
                :default-active="$route.path"
                :default-openeds="openedMenus"
                router
                ref="menu"
                style="border:none"
                @select="select"
            >
                <el-menu-tree
                    v-for="menu in $store.state.user.routers"
                    v-show="menu.path==modulePath"
                    :menus="menu.children||[]"
                    :key="menu.path"
                ></el-menu-tree>
            </el-menu>
        </el-scrollbar>
    </el-menu>

</template>

<script>
import { elMenuTree } from './components/el-menu-tree'
import {mapState} from "vuex"

export default {
    name:'indexPage',
    data(){
        return {
            modulePath:'',
        }
    },
    computed: {
        ...mapState({
                menuList:state=>state.menuList
        })
    },
    mounted() {
        console.log(this.menuList)
    },
    methods: {
        
    }
}
</script>

<style>

</style>